/*1、登录框边框*/
.aniRotateBorder{
  animation: rotateBd 6s linear 0s infinite;
  transform-origin: bottom right;
}
@keyframes rotateBd {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

/**2、流动边框 */
.bgContent::before{
  content:'';
  position: absolute;
  left:-150%;
  top:-150%;
  width: 400%;
  height: 400%;
  background-repeat: no-repeat;
  background-size: 50% 50%, 50% 50%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
	100% { transform: rotate(1turn); }
}
/***3、角向渐变*/
.conic::before {
  content: '';
  position: absolute;
  left: -150%;
  top: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(transparent,rgba(168, 239, 255, 1), transparent 30%);
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
	100% { transform: rotate(1turn); }
}
/**4、clip裁剪制作边框 */
.clipContent::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 4px solid gold;
  border-radius:10px;
  animation: clippath 3s infinite linear;
}
@keyframes clippath {
  0%,
  100% {
    clip-path: inset(0 0 95% 0);
  }
  25% {
    clip-path: inset(0 95% 0 0);
  }
  50% {
    clip-path: inset(95% 0 0 0);
  }
  75% {
    clip-path: inset(0 0 0 95%);
  }
}
/***5、渐变边框 */
.border-image-clip-path {
  width: 200px;
  height: 100px;
  border: 10px solid;
  border-image: linear-gradient(45deg, gold, deeppink) 1;
  clip-path: inset(0px round 10px);
  filter: hue-rotate(360deg);
}
@keyframes huerotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}